import React from 'react';
import {Input, Form, Row, Col, Select} from 'antd';

import RCModal from '@components/modal/index.jsx';
import {payType, quarters, years, partyBranch} from '@assets/config/global.js';

import './scss/parter_pay_modal.scss';

const FormItem = Form.Item;
const Option = Select.Option;

class ParterPayModal extends React.Component {

    componentDidMount() {
        this.props.form.validateFields();
    }

    submitForm() {
        let formInfo = this.props.form.getFieldsValue();
        this.props.submitForm(formInfo);
        this.props.form.resetFields();
    }

    onCancel() {
        this.props.form.resetFields();
        this.props.cancelForm();
    }

    // 判断是否可以提交
    hasErrors(fieldsError) {
        let disabled = Object.keys(fieldsError).some(field => fieldsError[field]);
        return disabled;
    }

    render() {
        let month = (new Date()).getMonth() + 1;
        let curQuart = Math.ceil(month / 3) - 1;
        let {modalVisible = true, showFooter = true, data = {}} = this.props;

        const formItemLayout = {
            colon: false,
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        };
        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const rules = [{required: true, message: '必填项！'}];

        const nameError = isFieldTouched('name') && getFieldError('name');// 姓名不能为空
        const orgIdError = isFieldTouched('orgId') && getFieldError('orgId');// 所在党组织不能为空
        const payYearError = isFieldTouched('payYear') && getFieldError('payYear');// 所在党组织不能为空
        const payTypeError = isFieldTouched('payType') && getFieldError('payType');// 缴纳类型不能为空
        const payQuarterError = isFieldTouched('payQuarter') && getFieldError('payQuarter');// 缴纳季度不能为空
        const moneyError = isFieldTouched('money') && getFieldError('money');// 缴纳季度不能为空

        return (
            <RCModal
                visible={modalVisible}
                showFooter={showFooter}
                title='党员缴纳信息'
                footerText={{okText: '保存'}}
                onOk={this.submitForm.bind(this)}
                onCancel={this.onCancel.bind(this)}
                disabled={this.hasErrors(getFieldsError())}
            >
                <Form layout="horizontal">
                    <div className="parter-pay-modal modal-content">
                        <Row>
                            <Col span={24}>
                                <FormItem label='党员姓名' {...formItemLayout}
                                          validateStatus={nameError ? 'error' : ''}
                                          help={nameError || ''}
                                >
                                    {
                                        getFieldDecorator('name', {initialValue: data.name || '', rules})(
                                            <Input disabled={true} placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='所在党支部' {...formItemLayout}
                                          validateStatus={orgIdError ? 'error' : ''}
                                          help={orgIdError || ''}
                                >
                                    {
                                        getFieldDecorator('orgId', partyBranch[data.orgId] ? {
                                            initialValue: partyBranch[data.orgId].orgId || '',
                                            rules
                                        } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择' disabled>
                                                {
                                                    Object.keys(partyBranch).map((item, index) => {
                                                        return <Option value={partyBranch[item].orgId}
                                                                       key={index}>{partyBranch[item].name}</Option>
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='缴纳年度' {...formItemLayout}
                                          validateStatus={payYearError ? 'error' : ''}
                                          help={payYearError || ''}
                                >
                                    {
                                        getFieldDecorator('payYear', {
                                            initialValue: (new Date()).getFullYear(),
                                            rules
                                        })(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    years.map((item, index) => {
                                                        return <Option value={item} key={index}>{item}</Option>
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='缴纳类型' {...formItemLayout}
                                          validateStatus={payTypeError ? 'error' : ''}
                                          help={payTypeError || ''}
                                >
                                    {
                                        getFieldDecorator('payType', payType[data.payType] ? {
                                            initialValue: data.payType || 0,
                                            rules
                                        } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(payType).map((item, index) => {
                                                        return (
                                                            <Option value={payType[item].id} key={index}>{payType[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='缴纳季度' {...formItemLayout}
                                          validateStatus={payQuarterError ? 'error' : ''}
                                          help={payQuarterError || ''}
                                >
                                    {
                                        getFieldDecorator('payQuarter', {
                                            initialValue: curQuart,
                                            rules
                                        })(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    quarters.map((item, index) => {
                                                        return <Option value={index} key={index}>{item}</Option>
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='季度缴纳金额' {...formItemLayout}
                                          validateStatus={moneyError ? 'error' : ''}
                                          help={moneyError || ''}
                                >
                                    {
                                        getFieldDecorator('money', {
                                            initialValue: data.money || '',
                                            rules
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </RCModal>
        )
    }
}

ParterPayModal = Form.create({})(ParterPayModal);

export default ParterPayModal;